import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Button, Wrapper, Menu, MenuItem} from 'react-aria-menubutton';
import _ from 'lodash';

export default class Navbar extends Component {
  static propTypes = {
    app: PropTypes.string,
    lang: PropTypes.string,
  }

  static apps = {
    coder: '<%= UIText.coder_title %>',
    format: '<%= UIText.format_title %>',
  }

  static langs = {
    en: 'English',
    zh: '中文',
  }

  selectApp = (value, event) => {
    window.location = this.props.lang == 'en'
    ? `/${value}.html`
    : `/${this.props.lang}/${value}.html`
    ;
  }

  selectLang = (value, event) => {
    window.location = value == 'en'
    ? `/${this.props.app}.html`
    : `/${value}/${this.props.app}.html`
    ;
  }

  createMenuItems(items, selected) {
    const menuItems = [];
    _.forEach(items, (name, value) => {
      let itemClass = 'AriaMenuButton-menuItem';
      if (selected === value) {
        itemClass += ' is-selected';
      }
      menuItems.push(
        <li key={value} className='AriaMenuButton-menuItemWrapper'>
          <MenuItem className={itemClass} value={value}>
            {name}
          </MenuItem>
        </li>
      );
    });
    return menuItems;
  }

  render() {
    const menuItemsApp = this.createMenuItems(Navbar.apps, this.props.app);
    const menuItemsLang = this.createMenuItems(Navbar.langs, this.props.lang);
    return <nav className="flex-left">
      <h1 className='logo unit text-left' style={{marginTop: '10px'}}>toolkit.site</h1>
      <Wrapper className='AriaMenuButton unit-0' style={{marginTop: '10px'}} onSelection={this.selectApp}>
        <Button className='AriaMenuButton-trigger'>{Navbar.apps[this.props.app]}</Button>
        <Menu>
          <ul className='AriaMenuButton-menu' style={{width: '250px'}}>{menuItemsApp}</ul>
        </Menu>
      </Wrapper>
      <Wrapper className='AriaMenuButton unit-0' style={{marginTop: '10px'}} onSelection={this.selectLang}>
        <Button className='AriaMenuButton-trigger'>{Navbar.langs[this.props.lang]}</Button>
        <Menu>
          <ul className='AriaMenuButton-menu' style={{width: '120px'}}>{menuItemsLang}</ul>
        </Menu>
      </Wrapper>
    </nav>;
  }
}
